import XYZ from "ol/source/XYZ";
import TileLayer from "ol/layer/Tile";
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import { Stroke } from 'ol/style.js';
import Graticule from 'ol/layer/Graticule';

import ImageLayer from 'ol/layer/Image';
// import Projection from 'ol/proj/Projection';
import Static from 'ol/source/ImageStatic';

import { chartSourceURL, LayerZIndex } from "../options"
import ShipMethods from "./shipLayer"
import MethodMixin from "./method"
import DrawMethods from "./draw";
import { transformLonlatToNow, getLonAndLat } from "./util"
import { getArpaState } from "@/api/apra"

const getAlarmShipByid = () => { }

export default {
  mixins: [MethodMixin],
  data() {
    return {
      shipDetailInfo: {},
      isTracking: false, // 是否追踪船舶
      selectShipData: {},  // 目前选中船只data
      AlarmData: {}, // 案件报警详情
      areaList: [], // 执法区域
      radarOptions: null,
      radarLayerName: "",
      trajectorysShow: false,
      trajectorysList: [], // 轨迹点
      apraList: [], // 雷达基本信息
    }
  },
  methods: {
    // 初始化图层
    initMainLayer() {
      return new TileLayer({
        source: new XYZ({
          url: chartSourceURL,
        }),
        name: "MAIN"
      });
    },
    // 本船队数据
    initShipTeam() {
      this.shipSource = null
      this.shipLayer = null
      this.shipSource = new VectorSource({
        features: []
      });
      this.shipLayer = new VectorLayer({
        source: this.shipSource,
        zIndex: LayerZIndex.ship,
        name: "SHIPLAYER"
      });
      this.map.addLayer(this.shipLayer)
      // if (shipList.length >= 0) {
      //   for (let item of shipList) {
      //     this.handleDrawShip(item)
      //   }
      // }
    },
    handleDrawShip(row) {
      ShipMethods.drawBaseShip(row, 1, this.shipSource, this.map)
    },
    // 船
    deleteShipById(row) {
      for (let key in row) {
        for (let item of row[key]) {
          let targetNum = item
          if (key === '1') {
            targetNum = "san" + item
          }
          const feature = this.shipSource.getFeatureById(targetNum)
          if (feature) {
            this.shipSource.removeFeature(feature)
          }
          if (key === "2") {
            const sanTargetNum = "san" + item
            const sanFeature = this.shipSource.getFeatureById(sanTargetNum)
            console.log(sanTargetNum, ": ", sanFeature)
            if (sanFeature) {
              this.shipSource.removeFeature(sanFeature)
            }
          }
        }
      }
    },
    // 绘制船舶
    handleDrawShips(row, isNormal = true) {
      // 更新船舶的报警信息
      let shipFeature = this.shipSource.getFeatureById(row.mmsi)
      if (isNormal) {
        if (shipFeature) {
          const detail = shipFeature.values_.detail
          row.alarmList = detail.alarmList
        }
      } else {
        if (row.alarmList.length === 0) {
          delete row.alarmList
        }
      }
      if (this.mapZoomIndex < this.styleMinLimit) {
        ShipMethods.drawPointShip(row, 1, this.shipSource, this.map)
      } else if (this.mapZoomIndex < this.styleMaxLimit) {
        ShipMethods.drawBaseShip(row, 1, this.shipSource, this.map)
      } else {
        if (row.length > 0 && row.width > 0) {
          ShipMethods.drawRealShip(row, 1, this.shipSource, this.map)
        } else {
          ShipMethods.drawBaseShip(row, 1, this.shipSource, this.map)
        }
      }
      this.$store.dispatch("refreshShipListByMmsi", this.shipSource.getFeatureById(row.mmsi).values_.detail);
    },
    // 初始化网格
    initGraticule() {
      new Graticule({
        map: this.map,
        strokeStyle: new Stroke({
          color: 'rgba(12, 12, 12, 0.8)',
          width: 0.4,
          lineDash: [10, 10],
        }),
        targetSize: 150,
        opacity: 0.6,
        zIndex: 201,
        showLabels: true,
      });
      // graticuleLayer.setMap(this.map);
    },
    // 初始化雷达
    initRadarList(options = this.radarShowOptions) {
      DrawMethods.drawRadar(this.map, this.apraList, options);
      // 圈
      let layerTmp = this.map.getLayers().getArray().find(m => m.get("name") === "forbiddenAreas")
      if (layerTmp) this.map.removeLayer(layerTmp)
      if (options.areaShow === 1) {
        this.drawForbiddenAreas()
      }
    },
    // 根据当前用户id进行案件的显示
    initAlarmByShipId() {
      this.map.getOverlays().clear();
      getAlarmShipByid(this.userInfo.shipId).then(({ data }) => {
        this.AlarmData = { ...data }
        if (data.caseFlag === '0') DrawMethods.drawAlarmPoint(this.map, [data.lon, data.lat], data)
      })
    },
    initImage(img, layerName) {
      const point = this.radarOptions.center;
      const length = this.radarOptions.range;
      // const length = 7 * 1852
      // 根据中心点和长度，计算左下角和右上角的位置
      let firstPoint = getLonAndLat(point[0], point[1], 225, length * Math.SQRT2)
      let lastPoint = getLonAndLat(point[0], point[1], 45, length * Math.SQRT2)
      // 转化为当前投影的点
      firstPoint = transformLonlatToNow([firstPoint.lon, firstPoint.lat])
      lastPoint = transformLonlatToNow([lastPoint.lon, lastPoint.lat])
      // 根据两个点得到图片显示的范围
      const extent = firstPoint.concat(lastPoint)
      return new ImageLayer({
        source: new Static({
          // attributions: '© <a href="https://xkcd.com/license.html">xkcd</a>',
          // url: "/img/chart/11.jpg",
          url: img,
          imageExtent: extent,
        }),
        name: layerName
      })
    },
    initArpaInfo() {
      getArpaState().then(({ data }) => {
        let info = {
          name: "群英路15号雷达",
          lon: data.lon,
          lat: data.lat,
          minLength: 6,
          maxLength: 8,
          height: 25,
          info: data
        }
        this.apraList = [info];
        this.initRadarList()
      })
    }
  },
  mounted() {
  }
}
